<script setup lang="ts">
import {ref} from 'vue';
import CodeEditor from "../../../../components/code/CodeEditor.vue";
import {Brush} from "@element-plus/icons-vue";
import {useUserStore} from "@/stores/userStore.ts";

const userStore = useUserStore();

const props = defineProps<{
  language: string,
  languages: string[],
  isMobile: boolean
}>();

const emit = defineEmits(['update:code', 'update:language', 'onSubmitTestCase', 'submit-code']);

const code = ref('');
const codeEditorRef = ref();

// 格式化代码
const formatCode = () => {
  codeEditorRef.value?.formatCode();
};

// 更新代码
const updateCode = (value: string) => {
  code.value = value;
  emit('update:code', value);
};

// 更新语言
const updateLanguage = (value: string) => {
  emit('update:language', value);
};
</script>

<template>
  <!-- 桌面端代码编辑器 -->
  <div class="code-editor">
    <div class="language-selector">
      <div class="selector-container">
        <el-select
            v-model="props.language"
            size="small"
            class="language-select"
            @change="updateLanguage"
        >
          <el-option
              v-for="item in props.languages"
              :key="item"
              :label="item"
              :value="item"
          />
        </el-select>

        <el-button
            size="small"
            type="primary"
            @click="formatCode"
            :icon="Brush"
        >
          格式化
        </el-button>
      </div>
    </div>
    <CodeEditor
        ref="codeEditorRef"
        :value="code"
        :handle-change="updateCode"
        :language="props.language"
    />
    <!-- 移动端提交按钮 -->
    <el-button
        v-if="isMobile"
        type="primary"
        size="small"
        @click="$emit('submit-code')"
        :disabled="!userStore.isLogin"
    >
      提交代码
    </el-button>
  </div>
</template>

<style scoped>
.code-editor {
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.language-selector {
  padding: 8px 12px;
  border-bottom: 1px solid #e4e7ed;
  background-color: #ffffff;
}

.selector-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.language-select {
  width: 100px;
}

.test-cases {
  padding: 12px 16px;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.test-input {
  flex: 1;
  margin-bottom: 12px;
}

.test-button {
  display: flex;
  justify-content: flex-end;
}

.test-result {
  height: 100%;
  padding: 12px;
  overflow-y: auto;
}

.submission-title {
  font-size: 14px;
  color: #1A1A1A;
  margin-right: 10px;
}

/* 移动端样式 */
.mobile-test-case {
  margin-top: 12px;
}

@media screen and (max-width: 768px) {
  .test-cases {
    padding: 12px;
  }

  .test-input {
    margin-bottom: 12px;
  }

  .test-button {
    display: flex;
    justify-content: flex-end;
  }

  .language-selector {
    padding: 8px;
    border-bottom: 1px solid #e4e7ed;
  }

  .selector-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}
</style> 